<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" th:href="@{/static/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/index/js/lay-module/step-lay/step.css}" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        .step-window{
            height: 100%;
            width: 560px;
            margin: 0 auto;
            overflow: auto;
        }
        .collapse-close{
            position: absolute;
            right: 10px;
            z-index: 99;
            line-height: 42px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="layuimini-container">
        <div class="layuimini-main">

            <div class="layui-fluid">
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-top: 40px;">
                        <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                            <div carousel-item>
                                <!-- step 1 start -->
                                <div>
                                    <form class="layui-form" style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">房间号：</label>
                                            <div class="layui-input-block">
                                                <div class="layui-col-md2">
                                                    <input type="text" class="layui-input layui-disabled" disabled
                                                           required v-model="room.floor"/>
                                                </div>
                                                <div class="layui-col-md8">
                                                    <input type="text" class="layui-input layui-disabled" disabled
                                                           required v-model="room.roomNum"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">房间类型:</label>
                                            <div class="layui-input-block">
                                                <input type="text" class="layui-input layui-disabled" disabled required
                                                       v-model="room.roomTypeObj.type">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">单价：</label>
                                            <div class="layui-input-block">
                                                <input type="text" class="layui-input layui-disabled" disabled required
                                                       :value="room.roomTypeObj.price / 100.0">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-inline">

                                                <div class="layui-inline" id="ID-laydate-rangeLinked">
                                                    <label class="layui-form-label">入住时间:</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" autocomplete="off" id="start_date" class="layui-input" lay-verify="required" required placeholder="开始日期" >
                                                    </div>
                                                    <div class="layui-form-mid">到</div>
                                                    <div class="layui-input-inline">
                                                        <input type="text" autocomplete="off" id="end_date" class="layui-input" lay-verify="required" required placeholder="结束日期">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button class="layui-btn" lay-submit lay-filter="formStep">
                                                    &emsp;下一步&emsp;
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!-- step 1 end -->
                                <!-- step 2 start -->
                                <div>
                                    <div class="step-window">
                                        <form class="layui-form"
                                          style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                                        <div id="info-container">
                                            <div class="layui-collapse" style="position: relative" lay-accordion v-for="(item, index) in guests">
                                                <span class="collapse-close" @click.prevent="removeInfo(index)" >X</span>
                                                <div class="layui-colla-item">
                                                    <div class="layui-colla-title">入住人信息</div>
                                                    <div class="layui-colla-content layui-show">
                                                        <div class="layui-form-item">
                                                            <label class="layui-form-label">身份证</label>
                                                            <div class="layui-input-block">
                                                                <button type="button" class="layui-btn" :id="'ID-upload-demo-btn' + index" :data-index="index">
                                                                    <i class="layui-icon layui-icon-upload"></i> 身份证上传
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div class="layui-form-item">
                                                            <label class="layui-form-label">入住人姓名</label>
                                                            <div class="layui-input-block">
                                                                <input type="text" placeholder="请填写入住人姓名"
                                                                       class="layui-input"
                                                                       name="name"
                                                                       v-model="guests[index].name"
                                                                       lay-verify="required|name" required/>

                                                            </div>
                                                        </div>
                                                        <div class="layui-form-item">
                                                            <label class="layui-form-label">入住人身份证号码：</label>
                                                            <div class="layui-input-block">
                                                                <input type="text" placeholder="请填写入住人身份证号码"
                                                                       class="layui-input"
                                                                       name="idNumber"
                                                                          v-model="guests[index].idNumber"
                                                                       lay-verify="required|idcard" required/>

                                                            </div>
                                                        </div>
                                                        <div class="layui-form-item">
                                                            <label class="layui-form-label">入住人住址：</label>
                                                            <div class="layui-input-block">
                                                                <input type="text" placeholder="请填写入住人住址"
                                                                       class="layui-input"
                                                                       name="address"
                                                                            v-model="guests[index].address"
                                                                       lay-verify="required|address" required/>

                                                            </div>
                                                        </div>
                                                        <div class="layui-form-item">
                                                            <label class="layui-form-label">入住人民族：</label>
                                                            <div class="layui-input-block">
                                                                <input type="text" placeholder="请填写入住人民族"
                                                                       class="layui-input"
                                                                       name="nation"
                                                                            v-model="guests[index].nation"
                                                                       lay-verify="required|address" required/>

                                                            </div>
                                                        </div>
                                                        <div class="layui-form-item" pane>
                                                            <label class="layui-form-label">性别：</label>
                                                            <div class="layui-input-block">
                                                                <select name="interest" lay-filter="demo-radio-filter" :data-id="index" v-model="guests[index].gender">
                                                                    <option>男</option>
                                                                    <option>女</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button class="layui-btn" type="button" @click="addInfo()">
                                                    &emsp;添加入住人信息 &emsp;
                                                </button>
                                                <button class="layui-btn pre" type="button">
                                                    &emsp;上一步&emsp;
                                                </button>
                                                <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                    &emsp;下一步&emsp;
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                    </div>
                                </div>
                                <!-- step 2 end -->
                                <!-- step 3 start -->
                                <div>
                                    <form class="layui-form" style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">房间号:</label>
                                            <div class="layui-input-block">
                                                <div class="layui-form-mid layui-word-aux" >{{room.floor}}</div>
                                                <div class="layui-form-mid layui-word-aux">{{room.roomNum}}</div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">入住人数:</label>
                                            <div class="layui-input-block">
                                                <div class="layui-form-mid layui-word-aux">{{guests.length}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">单价:</label>
                                            <div class="layui-input-block">
                                                <div class="layui-form-mid layui-word-aux">{{room.roomTypeObj.price / 100.0}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">时间:</label>
                                            <div class="layui-input-block">
                                                <div class="layui-form-mid layui-word-aux" >{{intakeInfo.startTime + ' 到 ' + intakeInfo.endTime + '(共计： '+ day + '天)'}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">总计金额:</label>
                                            <div class="layui-input-block">
                                                <div class="layui-form-mid layui-word-aux">
                                                    <span style="font-size: 18px;color: #333;" >{{room.roomTypeObj.price * day / 100.0}}元</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">押金:</label>
                                            <div class="layui-input-block">
                                                <input type="text" class="layui-input" lay-verify="required" required
                                                       name="deposit" />
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">预付款:</label>
                                            <div class="layui-input-block">
                                                <input type="text" class="layui-input" lay-verify="required" required
                                                       name="prepay" />
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn layui-btn-primary pre">上一步
                                                </button>
                                                <button class="layui-btn" lay-submit lay-filter="formStep3">
                                                    &emsp;确认&emsp;
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div>
                                    <div style="text-align: center;margin-top: 90px;">
                                        <i class="layui-icon layui-circle"
                                           style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                        <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                            入住成功
                                        </div>
                                        <div style="font-size: 14px;color: #666;margin-top: 20px;">go go go</div>
                                    </div>
                                    <div style="text-align: center;margin-top: 50px;">
                                        <button class="layui-btn layui-btn-primary" @click="closeFrame">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/index/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script src="/static/lib/vue/vue.global.js"></script>
<script th:inline="javascript">
    let ctx = [[${#httpServletRequest.getContextPath()}]];
    let id = [[${id}]];
</script>

<script>
    let $, form, step, laydate, util;
    const options = {
        data() {
            return {
                room: {},  // 入住房间信息
                // roomType: '', // 入住房间类型
                day: 0, // 入住天数
                guests: [], // 入住人员信息
                intakeInfo: {
                    roomId: id, // 入住房间id
                    startTime: '', // 入住时间
                    endTime: '', // 退房时间
                    deposit: 0 // 押金
                }, // 入住信息
            }
        },
        methods: {
            // 获取房间信息
            getRoomInfo() {
                let _that = this;
                jQuery.get({
                    async: false, // 同步

                    url: ctx + '/room/get/' + _that.intakeInfo.roomId,
                    success: res => {
                        if (res.code == 200) {
                            console.log(res.data)
                            _that.room = res.data;
                            _that.roomType = res.data.roomTypeObj.type;
                        }
                    }
                });
            }
            // 添加入住人员信息
            , addInfo() {
                let _that = this;
                this.guests.push({gender: '男'});

                var length = this.guests.length;

                setTimeout(() => {
                    var uploadInst = layui.upload.render({
                        elem: '#ID-upload-demo-btn' + (length - 1),
                        url: ctx + '/idcard', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                        before: function(obj){
                            layer.msg('上传中', {icon: 16, time: 0});
                        },
                        done: function(res){
                            // console.log(this.elem[0])
                            // 若上传失败
                            if(res.code == 200){
                                // 上传成功
                                layer.msg('上传完毕', {icon: 1});
                                console.log(res);

                                // 设置值
                                let result = res.data.words_result;
                                _that.guests[length - 1].name = result['姓名'].words;
                                _that.guests[length - 1].idNumber = result['公民身份号码'].words;
                                _that.guests[length - 1].address = result['住址'].words;
                                _that.guests[length - 1].nation = result['民族'].words;
                                _that.guests[length - 1].gender = result['性别'].words;
                                setTimeout(function(){
                                    layui.form.render('select');
                                }, 100);
                            }
                        }
                    });
                    layui.form.render('select');
                    layui.element.render('collapse');
                }, 100);
            }

            , removeInfo(index) {
                // event.target.parentElement.remove()
                this.guests.splice(index, 1);
                setTimeout(() => {
                    layui.form.render('select');
                }, 100);
            },
            closeFrame(){
                parent.layer.closeAll();
            }
        },
        created() {
            this.getRoomInfo();
        },
        mounted() {
            let _that = this;
            layui.use(['form', 'step', 'laydate', 'util', 'upload'], function () {
                     $ = layui.$,
                    form = layui.form,
                    step = layui.step,
                    laydate = layui.laydate,
                     upload = layui.upload,
                    util = layui.util;
                // 分步表单
                step.render({
                    elem: '#stepForm',
                    filter: 'stepForm',
                    width: '100%', //设置容器宽度
                    stepWidth: '750px',
                    height: '500px',
                    stepItems: [{
                        title: '入住房间信息'
                    }, {
                        title: '入住人员信息'
                    }, {
                        title: '付款信息'
                    }, {
                        title: '完成'
                    }]
                });

                // 日期范围
                laydate.render({
                    elem: '#ID-laydate-rangeLinked',
                    range: ['#start_date', '#end_date'],
                    format: 'yyyy-MM-dd',
                    rangeLinked: true,
                    min: -0,
                    max: 30,
                    // value: util.toDateString(new Date(), 'yyyy-MM-dd') + " 到 " + util.toDateString(new Date(), 'yyyy-MM-dd'),
                    calendar: true,
                    btns: ['clear', 'now', 'confirm'],
                    shortcuts: [
                        {
                            text: "这个月",
                            value: function () {
                                var value = [];
                                var date1 = new Date();
                                // date1.setMonth(date1.getMonth() - 1);
                                date1.setDate(1);
                                date1.setHours(0, 0, 0, 0);
                                value.push(date1);
                                var date2 = new Date();
                                date2.setMonth(date2.getMonth() + 1);
                                date2.setDate(1);
                                date2.setHours(0, 0, 0, 0);
                                date2 = date2.getTime() - 1;
                                value.push(new Date(date2));
                                return value;
                            }()
                        },
                        {
                            text: "下个月",
                            value: function () {
                                var value = [];
                                var date1 = new Date();
                                date1.setMonth(date1.getMonth() + 1);
                                date1.setDate(1);
                                date1.setHours(0, 0, 0, 0);
                                value.push(date1);
                                var date2 = new Date();
                                date2.setMonth(date2.getMonth() + 2);
                                date2.setDate(1);
                                date2.setHours(0, 0, 0, 0);
                                date2 = date2.getTime() - 1;
                                value.push(new Date(date2));
                                return value;
                            }()
                        }
                    ],
                    onConfirm(value, date, endDate) {
                        console.log(value, date, endDate)
                        _that.intakeInfo.startTime = value.split(" - ")[0];
                        _that.intakeInfo.endTime =  value.split(" - ")[1];

                        let days = 0;
                        // 判断是否在同一个月
                        if (date.month != endDate.month) {
                            var endDate1 = laydate.getEndDate(date.month, date.year);
                            days += endDate1 - date.date;
                            days += endDate.date;
                        } else {
                            days = endDate.date - date.date;
                        }
                        _that.day = days;

                    }
                });

                _that.addInfo();

                // var uploadInst = upload.render({
                //     elem: '.ID-upload-demo-btn',
                //     url: ctx + '/idcard', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                //     before: function(obj){
                //         layer.msg('上传中', {icon: 16, time: 0});
                //     },
                //     done: function(res){
                //         console.log(this)
                //         console.log(event)
                //         // 若上传失败
                //         if(res.code == 200){
                //             // 上传成功
                //             layer.msg('上传完毕', {icon: 1});
                //             console.log(res);
                //
                //             // 设置值
                //             let result = res.data.words_result;
                //             _that.guests[0].name = result['姓名'].words;
                //             _that.guests[0].idNumber = result['公民身份号码'].words;
                //             _that.guests[0].address = result['住址'].words;
                //             _that.guests[0].nation = result['民族'].words;
                //             _that.guests[0].gender = result['性别'].words;
                //         }
                //     }
                // });

                // 第一个单选框
                form.on('select(demo-radio-filter)', function(data){
                    console.log("radio render")
                    var elem = data.elem; // 获得 radio 原始 DOM 对象
                    var value = elem.value; // 获得 radio 值
                    // data-id
                    _that.guests[elem.dataset.id].gender = value;
                });

                form.on('submit(formStep)', function (data) {
                    step.next('#stepForm');
                    return false;
                });

                form.on('submit(formStep2)', function (data) {
                    step.next('#stepForm');
                    return false;
                });

                form.on('submit(formStep3)', function (data) {
                    _that.intakeInfo.deposit = data.field.deposit * 100;
                    _that.intakeInfo.prepay = data.field.prepay * 100;
                    // 保存入住信息
                    jQuery.post({
                        url: ctx + '/intakeInfo',
                        data: JSON.stringify(_that.intakeInfo),
                        contentType: 'application/json;charset=utf-8',
                        success: res => {
                            if (res.code == 200) {
                                let id = res.data;
                                // 保存入住人员信息
                                _that.guests.forEach(item => {
                                    item.intakeId = id;
                                });

                                jQuery.post({
                                    url: ctx + '/guests',
                                    data: JSON.stringify(_that.guests),
                                    contentType: 'application/json;charset=utf-8',
                                    success: res => {
                                        if (res.code == 200) {
                                           step.next('#stepForm');
                                        } else {
                                            layer.msg(res.msg);
                                        }
                                    }
                                });
                                // setTimeout(() => {
                                //     window.location.href = ctx + '/intake/list';
                                // }, 1000);
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    });

                    return false;
                });

                $('.pre').click(function () {
                    step.pre('#stepForm');
                });

                $('.next').click(function () {
                    step.next('#stepForm');
                });
            })
        }
    };
    const app = Vue.createApp(options);
    const vm = app.mount('#app');
</script>
</body>
</html>